<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabs Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>

<script type="text/javascript">
var djConfig = {
	debug: true,
	debugAtAllCosts: false
};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.HtmlTabs");
</script>

<style type="text/css">
body {
	font-family : sans-serif;
}

.dojoTabPanelContainer {
	width : 50%;
	height : 20em;
	padding : 10px;
	border : 1px solid #765;
	clear : both;
	margin-top : -1px;
	margin-bottom : 10px;
	overflow : auto;
	float : left;
}

.dojoTabPanelContainer :first-child {
	margin-top : 0;
}

.tabs {
	margin : 0;
	padding : 0;
	list-style : none;
}

.tabs li {
	float : left;
	padding-left : 9px;
	border-bottom : 1px solid #765;
	background : url(images/tab_left.gif) no-repeat left top;
}

.tabs li a {
	display : block;
	padding : 4px 15px 4px 6px;
	background : url(images/tab_right.gif) no-repeat right top;
	color : #333;
	font-size : 90%;
	text-decoration : none;
}

.tabs li.current {
	padding-bottom : 1px;
	border-bottom : 0;
	background-position : 0 -150px;
}

.tabs li.current a {
	padding-bottom : 5px;
	margin-bottom : -1px;
	background-position : 100% -150px;
}

/* bottom tabs */
.tabs.bottom li {
	border-bottom : 0;
	background : url(images/tab_left_r.gif) no-repeat left bottom;
}

.tabs.bottom li a {
	background : url(images/tab_right_r.gif) no-repeat right bottom;
}

.tabs.bottom li.current {
	margin-top : -1px;
	background-image : url(images/tab_left_r_curr.gif);
}

.tabs.bottom li.current a {
	background-image : url(images/tab_right_r_curr.gif);
}

#tabsHere {
	overflow : auto;
	float : none;
	margin : 0;
}
</style>
</head>

<body>
	<ul class="tabs" dojoType="tabs">
		<li><a href="tab1.html">Tab 1</a></li>
		<li><a href="tab2.html">Tab 2</a></li>
	</ul>
</body>
</html>
